<template>
  <div id="mulPieChartId" ref="mulPieChart" class="mulPieChart"></div>
</template>

<script>
import {resizeChart} from '@/assets/js/echartOptions.js'
export default {
  name: "MulPieChart",
  props:{
    pieId:{
      type:String,
      default:'mulPieChartId'
    },
    // 间隔颜色
    borderColor: {
      type: String,
      default: 'rgba(10, 29, 49, 1)'
    },
    // 饼图的颜色
    colors: {
      type: Array,
      default: () => ["#75D3BE", "#D18CD3", "#CEB680", "#79A6DA",'#009D33']
    },
    // 饼图数据
    datas: {
      type: Array,
      default: () => []
    },
  },
  data(){
    return {
      mulPieChart: null,
      options: null
    }
  },
  watch: {
    datas(val) {
      this.datas = val;
      this.initEchart()
    }
  },
  mounted(){
    this.initEchart()
  },
  methods:{
    initEchart(){
      this.mulPieChart =  this.$echarts.init(this.$refs['mulPieChart']);
      this.options = {
        tooltip: {
          // show: options.isShowTooltip,
          trigger: "item",
          // ...tooltipStyle,
        },

        legend: {
          show: true,
          // top: "5%",
          right: "1%",
          bottom:'1%',
          textStyle:{
            color:'#fff',
            fontFamily: 'Microsoft YaHei, Microsoft YaHei',
            fontWeight: 600
          },
          itemWidth :8,
          itemHeight:8,
          // orient:'vertical',
          icon:'circle',
          itemGap:20

        },
        series: [
          {
            name: '',
            type: "pie",
            radius: ['70%','80%'],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              // borderColor: options.borderColor,
              borderWidth: 4,
              // color:'RGBA(22, 57, 87, 1)',
              color: this.$echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                {offset: 0, color: 'rgba(65, 169, 243, 0.23)'},
                {offset: 0.5, color: 'rgba(97, 184, 255, 0)'},
                {offset: 1, color: 'rgba(65, 163, 243, 0.29)'},
              ]),
              // color: (params) => options.colors[params.dataIndex],
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [100],
          },
          {
            name: '',
            type: "pie",
            radius: ['50%', '70%'],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: this.borderColor,
              borderWidth: 4,
              color: (params) => this.colors[params.dataIndex],
            },
            label: {
              show: true,
              formatter: '{a|{b}}{c|{c}}',
              rich:{
                a:{
                  fontFamily: 'youshebiaoti',
                  fontSize:14,
                  color:'#fff',
                  padding:[0,10,0,0]
                },
                c:{
                  fontFamily: 'youshebiaoti',
                  fontSize:20,
                  color:'rgba(140, 217, 253, 1)'
                }
              },
            },
            labelLine: {
              show: true,
              normal: {
                length: 5, // 指示线长度
                length2:10
              },
            },
            data: this.datas,
          },
          {
            name: '',
            type: "pie",
            radius: ['30%','45%'],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: 'rgba(65, 234, 243, 0.6)',
              // borderWidth: 4,
              // color: (params) =>RGBA(15, 46, 80, 1),
              color:'RGBA(15, 46, 80, 1)'
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [100],
          },
          {
            name: '',
            type: "pie",
            radius: ['0%','29%'],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              // borderColor: options.borderColor,
              borderWidth: 4,
              color:'rgba(14, 71, 94, 0.6)',
              // color: (params) => options.colors[params.dataIndex],
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [100]
          },
        ],
      };
      this.mulPieChart.setOption(this.options);
      resizeChart(this.mulPieChart)
    }
  }
}
</script>

<style scoped>
 .mulPieChart{
   height: 100%;
   width: 100%;
 }
</style>
